// state 数据就可以使用 ref 来创建
// getter 数据就可以使用 computed 来创建
// action 数据就直接是一个函数即可

import { apiGet } from "@/utils/request";
import { defineStore } from "pinia";
import { ref, computed } from "vue";

export default defineStore(
  "city",
  () => {
    // 全量城市数据
    const cities = ref<ICity[]>([]);

    // 基于 cities 生成一份 ICityGroup[] ，用于页面展示
    const groups = computed<ICityGroup[]>(() => {
      // 最终结果集合
      const result: ICityGroup[] = [];
      // 循环
      cities.value.forEach((city) => {
        // 1. 获取当前 city 的 拼音首字母
        const title = city.pinyin.charAt(0).toUpperCase();
        // 2. 判断当前 title 在 result 中是否有存在
        //    如果存在，则将当前 city 追加到 result 中对应分组的 list 数组中
        //    如果不存在，则让 result 新增一项
        const findGroup = result.find((item) => item.title === title);
        if (findGroup) {
          // 存在
          findGroup.list.push(city);
        } else {
          // 不存在
          result.push({
            title,
            list: [city],
          });
        }
      });

      // 返回一份排序之后的结果
      return result.sort((a, b) => (a.title > b.title ? 1 : -1));
    });

    // 基于 groups 生成一份 用于右侧快速选择的数据
    const indexs = computed(() => {
      return groups.value.map((item) => item.title);
    });

    // 基于 cities 生成一份 hotCityList
    const hotCityList = computed(() => {
      return cities.value.filter((item) => item.isHot === 1);
    });

    // 获取城市列表数据
    async function getCityList() {
      const data = await apiGet<{ cities: ICity[] }>(
        "mall.film-ticket.city.list"
      );
      // 将 data.cities 赋值给 cities
      cities.value = data.cities;
    }

    // 当前选择的城市
    const selectedCity = ref<ICity>({
      cityId: 110100,
      isHot: 1,
      name: "北京",
      pinyin: "beijin",
    });

    // 更改当前选择的城市
    function changeSelectedCity(newCity: ICity) {
      selectedCity.value = newCity;
    }

    // 获取定位
    function getLocation(): Promise<{ longitude: number; latitude: number }> {
      return new Promise((resolve, reject) => {
        if (!navigator.geolocation) {
          reject("浏览器不支持");
          return;
        }

        navigator.geolocation.getCurrentPosition(
          (position) => {
            // 成功的回调
            // position.coords.longitude // 经度
            // position.coords.latitude // 纬度
            resolve({
              longitude: position.coords.longitude,
              latitude: position.coords.latitude,
            });
          },
          (error) => {
            // 失败的回调
            reject(error.message);
          },
          {
            // 额外的配置项
            timeout: 300,
          }
        );
      });
    }

    // 将经度纬度转换成城市数据
    async function getLocae(longitude?: number, latitude?: number) {
      const data = await apiGet<{ city: ICity }>(
        "mall.film-ticket.city.locate",
        {
          longitude,
          latitude,
        }
      );
      // 将定位的城市数据赋值给 selectedCity
      selectedCity.value = data.city;
    }

    return {
      cities,
      groups,
      indexs,
      hotCityList,
      selectedCity,
      getCityList,
      changeSelectedCity,
      getLocation,
      getLocae,
    };
  },
  {
    persist: true,
  }
);
